import eventBus from '@/eventBus';
import debunce from '@/utils/debunce.js';
import diff from '@/assets/diff.gif';
let imgs = []; //用来保存图片
// 调用该函数 可以设置那些合适的图片
function setImgs() {
  for (const img of imgs) {
    // 处理该图片
    setImg(img);
  }
}

function setImg(img){
  img.dom.src = diff; // 未加载完成默认使用此图片
  // 确认该图片是否在视口范围内
  const clientHeight = document.documentElement.clientHeight; // 得到视口高度
  const rect = img.dom.getBoundingClientRect(); // 确认该元素距离视口的距离
  const height = rect.height || 150; // 给一个默认高度 因为一开始可能没有图片
  if(rect.top >= -height && rect.top <= clientHeight){ // 表示在视口范围内
    const tempImg = new Image(); // 创建一个img标签
    tempImg.onload = function(){
      img.dom.src = img.src;
    }
    tempImg.src = img.src;
    imgs = imgs.filter((i)=>i !== img)

  }
}

function handleScroll() {
  setImgs()
}

// 1.监听事件滚动 触发setImg事件 使用防抖函数触发 handleScroll事件
eventBus.$on("mainScroll", debunce(handleScroll, 60))
export default {
  //仅在指令第一次绑定到元素时调用一次
  /**
   * 
   * @param {*} el 指令绑定到的元素 可用于直接操作dom
   * @param {*} binding 
   */
  bind(el, bindings) {
    const img = {// 添加一个对象进去
      dom: el,
      src: bindings.value
    }
    imgs.push(img);
    // 处理setImgs函数
    setImgs(img)

  },
  //当指令与元素解除绑定时，只调用一次
  unbind(el) {
    imgs = imgs.filter((img) => img.dom !== el)
  }
}